// example（钩子）作用：非类组件中使用state
// 消息处理的一种方法，使函数式组件变成了有状态的组件
// 组件冗长难以复用，之前的解决方案是无状态组件与HOC（高阶组件）
// 无状态函数式组件，内部不定义state，所有数据依赖于props注入
// 高阶组件，组件外再套一层组件，一层一层嵌套来达到组件复用的目的
// Hooks的目的是给函数式组件加上状态
// Hooks简化了组件，不再需要类组件，没有this,不会再有binding，甚至可能取代redux,减少了模板

// 状态钩子：useState()，返回值是一个只有两组元素的数组[状态，状态更新函数]，用于设置组件初始值
// 副作用钩子：useEffect()，给一个纯函数同样的值，永远返回同样的结果，输入参数一样，输出结果不确定，就是副作用


import React, { useState, useEffect } from 'react';
import styles from './Example.module.css';

export const Example: React.FC = () => {
    const [count, setCount] = useState<number>(0);
    const [list, setList] = useState<any>([]);

    // 空列表模拟生命周期函数mounted
    useEffect(() => {
        fetch('').then(res => res.json()).then(data => {
            setList(data);
        })
    }, []);

    useEffect(() => {
        document.title = `点击${count}次`
    }, [count]);

    return (
        <div>
            <p>您点击了{count}次</p>
            <button onClick={() => setCount(count + 1)}>Click me</button>

            {list.map((e) => (
                    <div>{e.title}</div>
                )
            )}
        </div>
    )
};